<template>
  <q-layout view="lHh lpr lFf" class="font-[MicrosoftYaHei]">
    <q-header>
      <q-toolbar class="ud-nav-bg p-4">
        <q-toolbar-title class="flex-none text-2xl">租房管理系统</q-toolbar-title>
        <q-toolbar-title>
          <q-btn-toggle
            class="ud-nav-menu cursor-pointer"
            v-model="menuRef"
            @update:model-value="onChange"
            flat
            stretch
            toggle-color="#fff"
            :options="menuOptions" />
        </q-toolbar-title>
        <!--        <q-btn
          class="ud-nav-bell-btn mr-4 cursor-pointer"
          color="light-blue-2"
          dense
          round
          icon="bi-bell"
          aria-label="bell" />
        <q-btn
          class="ud-nav-calendar-btn cursor-pointer"
          color="light-blue-2"
          dense
          round
          icon="bi-calendar-check"
          aria-label="calendar check" />-->

        <q-btn-dropdown class="ud-nav-dropdown" flat>
          <template v-slot:label>
            <span class="row items-center no-wrap">
              <img src="@/assets/images/user_head.png" />
              <b class="welcome-text text-center ml-2">欢迎您，{{ userInfo.name }}</b>
            </span>
          </template>

          <q-list>
            <q-item clickable v-close-popup @click="onLogout">
              <q-item-section avatar>
                <q-avatar icon="bi-escape" color="primary" text-color="white" />
              </q-item-section>
              <q-item-section>
                <q-item-label>退出</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-btn-dropdown>
      </q-toolbar>
    </q-header>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
  import { ref, provide } from 'vue'
  import { useRouter } from 'vue-router'
  import { useUserStore } from '@/stores/user-store'
  import { removeUserInfo } from '@/utils'

  const menuOptions = [
    { label: '首页', value: '/' },
    { label: '房源管理', value: 'house' },
    { label: '租金管理', value: 'rent' },
    { label: '维修管理', value: 'repair' },
    { label: '投诉管理', value: 'complaint' },
    { label: '租客管理', value: 'tenant' },
    { label: '用户管理', value: 'user' },
    { label: '订餐管理', value: 'meal-order' },
    { label: '投放管理', value: 'advert' }
  ]
  const menuRef = ref('/')
  const router = useRouter()
  const { userInfo, setUser } = useUserStore()
  let routeFullPath = router.currentRoute.value.fullPath
  if (routeFullPath.charAt(0) === '/') {
    routeFullPath = routeFullPath.slice(1)
  }
  const paths = routeFullPath.split('/')
  menuRef.value = paths[0] || '/'

  function onChange(path: string) {
    router.push({ path }).catch(async () => {
      await router.push({ path: `/error` })
    })
  }
  async function onLogout() {
    removeUserInfo()
    setUser()
    await router.push({ path: `/login` })
  }
  function setMenu(path: string) {
    menuRef.value = path
    router.push({ path }).catch(async () => {
      await router.push({ path: `/error` })
    })
  }
  provide('setMenu', setMenu)
</script>
<style scoped lang="scss">
  .ud-nav-bg {
    background: transparent url(@/assets/images/head_bg.png) no-repeat;
  }
  .ud-nav-menu :deep(.q-btn) {
    font-size: 18px;
    .block {
      border-bottom: 2px solid transparent;
    }
    &.text-\#fff .block {
      border-bottom: 2px solid #fff;
    }
  }
  .ud-nav-calendar-btn :deep(.q-icon),
  .ud-nav-bell-btn :deep(.q-icon) {
    font-size: 1.4em;
  }
  .ud-nav-dropdown :deep(.q-icon) {
    font-size: 2.315em;
  }
  @media screen and (max-width: 1470px) {
    .ud-nav-menu :deep(.q-btn) {
      padding: 4px 8px !important;
    }
    .welcome-text {
      display: none;
    }
  }
</style>
